<template>
  <div class="center-preview"
       :style='{"width":"1100px","padding":"10px 0 30px","margin":"10px auto","position":"relative","background":"#fff"}'>
    <div class="title"
         :style='{"margin":"10px 0","color":"#fff","borderRadius":"50px","textAlign":"center","background":"#000","fontSize":"20px","lineHeight":"54px"}'>
      {{ title }}
    </div>

    <el-tabs tab-position="left" :style='{"boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.302)","background":"#f5f5f5"}'
             @tab-click="handleClick">
      <el-tab-pane label="个人中心">
        <el-form class="center-preview-pv" ref="sessionForm" :model="sessionForm" :rules="rules" label-width="110px">
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="身份证"
                        prop="shenfenzheng">
            <el-input v-model="sessionForm.shenfenzheng" placeholder="身份证" readonly></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="密码"
                        prop="mima">
            <el-input type="password" v-model="sessionForm.mima" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="年龄"
                        prop="nianling">
            <el-input v-model="sessionForm.nianling" placeholder="年龄"></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="姓名"
                        prop="xingming">
            <el-input v-model="sessionForm.xingming" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="性别">
            <el-select v-model="sessionForm.xingbie" placeholder="请选择性别">
              <el-option v-for="(item, index) in dynamicProp.xingbie" :key="index" :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="手机"
                        prop="shouji">
            <el-input v-model="sessionForm.shouji" placeholder="手机"></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="邮箱"
                        prop="youxiang">
            <el-input v-model="sessionForm.youxiang" placeholder="邮箱"></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="地区"
                        prop="diqu">
            <el-input v-model="sessionForm.diqu" placeholder="地区"></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="住址"
                        prop="zhuzhi">
            <el-input v-model="sessionForm.zhuzhi" placeholder="住址"></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"10px","margin":"0 0 10px"}' v-if="userTableName=='yonghu'" label="照片">
            <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :headers="headers"
                :show-file-list="false"
                :on-success="yonghuzhaopianHandleAvatarSuccess">
              <img
                  :style='{"border":"1px dashed #000","cursor":"pointer","color":"#000","borderRadius":"6px","textAlign":"center","width":"100px","fontSize":"32px","lineHeight":"100px","height":"100px"}'
                  v-if="sessionForm.zhaopian" :src="baseUrl + sessionForm.zhaopian" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item :style='{"padding":"0","margin":"0"}'>
            <el-button
                :style='{"border":"0","cursor":"pointer","padding":"0","margin":"0 20px 0 0","outline":"none","color":"rgba(255, 255, 255, 1)","borderRadius":"4px","background":"rgba(0, 0, 0, 1)","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                type="primary" @click="onSubmit('sessionForm')">更新信息
            </el-button>
            <el-button
                :style='{"border":"0px solid rgba(64, 158, 255, 1)","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#fff","borderRadius":"4px","background":"#b8b8b8","width":"128px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                type="danger" @click="logout">退出登录
            </el-button>
          </el-form-item>
        </el-form>

        <el-dialog title="用户充值" :visible.sync="dialogFormVisibleMoney" width="726px" center>
          <el-form :model="chongzhiForm">
            <el-form-item label="充值金额" label-width="120px">
              <el-input type="number" v-model="chongzhiForm.money" autocomplete="off" placeholder="充值金额"></el-input>
            </el-form-item>
            <el-form-item label-width="120px">
              <el-radio-group v-model="chongzhiForm.radio">
                <el-radio style="margin-bottom: 30px" label="微信支付">
                  <el-image
                      style="width: 60px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/weixin.png')"
                      fit="fill"></el-image>
                  <span style="display: inline-block;margin-left: 10px">微信支付</span>
                </el-radio>
                <el-radio label="支付宝支付">
                  <el-image
                      style="width: 60px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/zhifubao.png')"
                      fit="fill"></el-image>
                  <span style="display: inline-block;margin-left: 10px">支付宝支付</span>
                </el-radio>
                <el-radio label="中国建设银行支付">
                  <el-image
                      style="width: 120px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/jianshe.png')"
                      fit="fill"></el-image>
                </el-radio>
                <el-radio label="中国农业银行支付">
                  <el-image
                      style="width: 126px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/nongye.png')"
                      fit="fill"></el-image>
                </el-radio>
                <el-radio label="中国银行支付">
                  <el-image
                      style="width: 140px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/zhongguo.png')"
                      fit="fill"></el-image>
                </el-radio>
                <el-radio label="交通银行支付">
                  <el-image
                      style="width: 120px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/jiaotong.png')"
                      fit="fill"></el-image>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleMoney = false">取 消</el-button>
            <el-button type="primary" @click="chongzhi">确认充值</el-button>
          </div>
        </el-dialog>
        <el-dialog title="会员购买" :visible.sync="dialogFormVisibleVip" width="726px" center>
          <el-form :model="chongzhiForm">
            <el-form-item label="会员卡" label-width="120px">
              <el-input readonly autocomplete="off" value="￥199/年"></el-input>
            </el-form-item>
            <el-form-item label-width="120px">
              <el-radio-group v-model="chongzhiForm.radio">
                <el-radio style="margin-bottom: 30px" label="微信支付">
                  <el-image
                      style="width: 60px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/weixin.png')"
                      fit="fill"></el-image>
                  <span style="display: inline-block;margin-left: 10px">微信支付</span>
                </el-radio>
                <el-radio label="支付宝支付">
                  <el-image
                      style="width: 60px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/zhifubao.png')"
                      fit="fill"></el-image>
                  <span style="display: inline-block;margin-left: 10px">支付宝支付</span>
                </el-radio>
                <el-radio label="中国建设银行支付">
                  <el-image
                      style="width: 120px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/jianshe.png')"
                      fit="fill"></el-image>
                </el-radio>
                <el-radio label="中国农业银行支付">
                  <el-image
                      style="width: 126px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/nongye.png')"
                      fit="fill"></el-image>
                </el-radio>
                <el-radio label="中国银行支付">
                  <el-image
                      style="width: 140px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/zhongguo.png')"
                      fit="fill"></el-image>
                </el-radio>
                <el-radio label="交通银行支付">
                  <el-image
                      style="width: 120px; height: 60px;vertical-align: middle;"
                      :src="require('@/assets/jiaotong.png')"
                      fit="fill"></el-image>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleVip = false">取 消</el-button>
            <el-button type="primary" @click="chongzhivip">确认支付</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="我的收藏"></el-tab-pane>
      <el-tab-pane label="预订的房间">
        <!-- TODO 循坏遍历 -->
        <div
            :style='{"margin":"10px 20px","overflow":"hidden","borderRadius":"10px","background":"#f5f5f5","display":"inline-block","width":"210px","position":"relative","height":"240px"}'
            v-for="item in kefangyudingList" :key="item.id"
            class="animation-box" @click="toDetail('jiudiankefangDetail', item)">
          <img :style='{"width":"210px","objectFit":"cover","borderRadius":"10px","display":"block","height":"180px"}'
               v-if="preHttp(item.kefangtupian)" :src="item.kefangtupian.split(',')[0]" alt=""/>
          <img :style='{"width":"210px","objectFit":"cover","borderRadius":"10px","display":"block","height":"180px"}'
               v-else :src="baseUrl + (item.kefangtupian?item.kefangtupian.split(',')[0]:'')" alt=""/>
          <div class=""
               :style='{"padding":"10px","overflow":"hidden","color":"rgba(0, 0, 0, 1)","lineHeight":"35px","fontSize":"16px","fontWeight":"550","height":"70px"}'>
            {{ item.kefangmingcheng }}
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史订单">
        <el-table
            height="600"
            :data="lisixinxiList"
            style="width: 100%">
          <el-table-column
              label="序号"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column
              prop="username"
              label="用户名"
              width="">
          </el-table-column>
          <el-table-column
              prop="xiandanshijian"
              label="订单时间"
              width="">
          </el-table-column>
          <el-table-column
              prop="kefangmingcheng"
              label="客房名称"
              width="">
          </el-table-column>
          <el-table-column
              prop="zhuangtai"
              label="状态"
              width="90">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="info" @click="quxiaodingdan(scope)">
                取消订单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
      <el-input v-model="tuidingyuanyin" placeholder="请输入退订原因" />
      <el-input v-model="yinxingzhanghao" placeholder="请输入银行账号" minlength="18" maxlength="18" />
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="tuidingHandler">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import config from '@/config/config'
import Vue from 'vue'

export default {
  //数据集合
  data() {
    return {
      title: '个人中心',
      baseUrl: config.baseUrl,
      sessionForm: {},
      rules: {},
      chongzhiForm: {
        money: '',
        radio: ''
      },
      disabled: false,
      dialogFormVisibleMoney: false,
      dialogFormVisibleVip: false,
      uploadUrl: config.baseUrl + 'file/upload',
      imageUrl: '',
      headers: {Token: localStorage.getItem('Token')},
      userTableName: localStorage.getItem('UserTableName'),
      dynamicProp: {},
      kefangyudingList: [],
      lisixinxiList: [],
      dialogVisible: false,
      tuidingyuanyin: '',
      yinxingzhanghao: '',
      currentRow: {}
    }
  },
  created() {
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'shenfenzheng', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'mima', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'nianling', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'xingming', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'xingbie', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'shouji', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'youxiang', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'diqu', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'zhuzhi', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'zhaopian', null);
    }

    if ('yonghu' == this.userTableName) {
      this.$set(this.rules, 'shenfenzheng', [{required: true, message: '请输入身份证', trigger: 'blur'}]);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.rules, 'shenfenzheng', [{required: false, validator: this.$validate.isIdCard, trigger: 'blur'}]);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.rules, 'mima', [{required: true, message: '请输入密码', trigger: 'blur'}]);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.rules, 'shouji', [{required: false, validator: this.$validate.isMobile, trigger: 'blur'}]);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.rules, 'youxiang', [{required: false, validator: this.$validate.isEmail, trigger: 'blur'}]);
    }

    this.init();
    this.getSession();
  },
  mounted() {
    this.getkefangyuding()
    // this.getlisixinxi()
  },
  //方法集合
  methods: {
    init() {
      if ('yonghu' == this.userTableName) {
        this.dynamicProp.xingbie = '男,女'.split(',');
      }
    },
    tuidingHandler() {

      this.currentRow.tuidingyuanyin = this.tuidingyuanyin
      this.currentRow.yinxingzhanghao = this.yinxingzhanghao
      this.currentRow.crossrefid = this.currentRow.kefangyudingid

      this.$http.post(`${this.baseUrl}kefangtuiding/addtuiding/${this.currentRow.id}`, JSON.stringify(this.currentRow)).then(()=>{
        this.getlisixinxi()
      })
      // TODO 缺少状态字段和刷新页面
      this.dialogVisible = false

      this.$message({
        message: '已提交',
        type: "success"
      })
    },
    preHttp(str) {
      return str && str.substr(0, 4) == 'http';
    },
    quxiaodingdan(scope) {
      this.currentRow = scope.row
      this.dialogVisible = true
      // console.log('scope---------->', scope);
      // this.$http.post(`${this.baseUrl}/kefangtuiding/add`, scope.row)
    },
    getkefangyuding() {
      this.$http.get(`${this.baseUrl}/kefangyuding/selectbysfz/${localStorage.getItem('username')}`).then(res => {
        this.kefangyudingList = res.data.data
        for (let item of this.kefangyudingList) {
          item.status = '支付'
        }
      })
    },
    getlisixinxi() {

      this.$http.get(`${this.baseUrl}dingdan/selectbyuserid/${this.sessionForm.shenfenzheng}`).then(res => {
        this.lisixinxiList = res.data.data
      })
    },
    toDetail(path, item) {
      this.$router.push({path: '/index/' + path, query: {detailObj: JSON.stringify(item)}});
    },
    getSession() {
      this.$http.get(this.userTableName + '/session', {emulateJSON: true}).then(res => {
        if (res.data.code == 0) {
          this.sessionForm = res.data.data;
          localStorage.setItem('userid', res.data.data.id);
          if (res.data.data.vip) {
            localStorage.setItem('vip', res.data.data.vip);
          }
          if (res.data.data.touxiang) {
            localStorage.setItem('headportrait', res.data.data.touxiang);
          } else if (res.data.data.headportrait) {
            localStorage.setItem('headportrait', res.data.data.headportrait);
          }
          this.getlisixinxi()
        }
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: '更新成功',
                type: 'success',
                duration: 1500
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    yonghuzhaopianHandleAvatarSuccess(res, file) {
      if (res.code == 0) {
        if ('yonghu' == this.userTableName) {
          this.sessionForm.zhaopian = 'upload/' + res.file;
        }
      }
    },
    chongzhi() {
      if (this.chongzhiForm.money == '') {
        this.$message({
          message: '请输入充值金额',
          type: 'error',
          duration: 1500
        });
        return;
      }
      if (this.chongzhiForm.money <= 0) {
        this.$message({
          message: '请输入正确的充值金额',
          type: 'error',
          duration: 1500
        });
        return;
      }
      if (this.chongzhiForm.radio == '') {
        this.$message({
          message: '请选择充值方式',
          type: 'error',
          duration: 1500
        });
        return;
      }
      this.sessionForm.money = parseInt(this.sessionForm.money) + parseInt(this.chongzhiForm.money);
      this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: '充值成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.dialogFormVisibleMoney = false;
            }
          });
        }
      });
    },
    chongzhivip() {
      this.chongzhiForm.money == 199;
      if (this.chongzhiForm.radio == '') {
        this.$message({
          message: '请选择支付方式',
          type: 'error',
          duration: 1500
        });
        return;
      }
      if (this.sessionForm.vip == '是') {
        this.$message({
          message: '您已是我们的尊贵会员。',
          type: 'success',
          duration: 1500
        });
        return;
      }

      this.sessionForm.vip = "是"
      this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: '会员购买成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              localStorage.setItem('vip', this.sessionForm.vip);
              this.dialogFormVisibleVip = false;
            }
          });
        }
      });
    },
    handleClick(tab, event) {
      switch (event.target.outerText) {
        case '个人中心':
          tab.$router.push('/index/center');
          break;
        case '我的收藏':
          localStorage.setItem('storeupType', 1);
          tab.$router.push('/index/storeup');
          break;
      }

      this.title = event.target.outerText;
    },
    logout() {
      localStorage.clear();
      Vue.http.headers.common['Token'] = "";
      this.$router.push('/index/home');
      this.activeIndex = '0'
      localStorage.setItem('keyPath', this.activeIndex)
      this.$forceUpdate()
      this.$message({
        message: '登出成功',
        type: 'success',
        duration: 1500,
      });
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.center-preview {

  .el-tabs {
    & /deep/ .el-tabs__header {
      .el-tabs__nav-wrap {
        margin: 0;

        &::after {
          content: none;
        }
      }

      .el-tabs__active-bar {
        display: none !important;
      }
    }

    .center-preview-pv {
      .el-date-editor.el-input {
        width: auto;
      }

      .balance {
        .el-input {
          width: auto;
        }
      }
    }
  }
}

.center-preview .el-tabs /deep/ .el-tabs__header {
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 1);
  width: 180px;
  min-height: 600px;
  border-color: #eee;
  border-width: 0 1px 0 0;
  position: relative;
  float: left;
  border-style: solid;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item {
  padding: 0 10px;
  color: #fff;
  background: rgba(0, 0, 0, 1);
  font-weight: 500;
  font-size: 16px;
  line-height: 40px;
  position: relative;
  text-align: center;
  height: 40px;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item:hover {
  padding: 0 10px;
  color: #fff;
  background: rgba(184, 184, 184, 1);
  font-weight: 500;
  font-size: 16px;
  line-height: 40px;
  position: relative;
  text-align: center;
  height: 40px;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item.is-active {
  padding: 0 10px;
  color: #fff;
  background: rgba(184, 184, 184, 1);
  font-weight: 500;
  font-size: 16px;
  line-height: 40px;
  position: relative;
  text-align: center;
  height: 40px;
}

.center-preview .el-tabs /deep/ .el-tabs__content .el-tab-pane {
  padding: 10px;
  background: #fff;
}

.center-preview-pv .el-form-item /deep/ .el-form-item__label {
  padding: 0 10px 0 0;
  color: #666;
  font-weight: 500;
  width: 110px;
  font-size: 14px;
  line-height: 40px;
  text-align: right;
}

.center-preview-pv .el-form-item .el-form-item__content {
  margin-left: 110px;
}

.center-preview-pv .el-input /deep/ .el-input__inner {
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
  color: #000;
  width: 400px;
  font-size: 14px;
  height: 40px;
}

.center-preview-pv .el-select /deep/ .el-input__inner {
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
  color: #000;
  width: 400px;
  font-size: 14px;
  height: 40px;
}

.center-preview-pv .el-date-editor /deep/ .el-input__inner {
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 0 10px 0 30px;
  outline: none;
  color: #000;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.center-preview-pv /deep/ .avatar-uploader-icon {
  border: 1px dashed #000;
  cursor: pointer;
  border-radius: 6px;
  color: #000;
  width: 100px;
  font-size: 32px;
  line-height: 100px;
  text-align: center;
  height: 100px;
}

.center-preview-pv .el-form-item.balance /deep/ .el-input__inner {
  border: 1px solid #000000;
  border-radius: 4px 0 0 4px;
  padding: 0 12px;
  outline: none;
  color: #000;
  display: inline-block;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.animation-box {
  cursor: pointer;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 0.3s ease-in-out;
}

.animation-box:hover {
  transform: scale(1.1);
}
#pane-2 {
  height: 600px;
  overflow: auto;
}

</style>
